<script setup lang="ts">
import {onMounted, ref} from "vue";
import {
  getGoodsAPI,
  addLossAPI
} from "@/axios/api";
import {ElMessage} from "element-plus";

const goodNameList = ref([])

interface use {
  gid: number | null
  number: number | null
  costPrice: number | null
  remark: string | null
}

const form = ref<use>({
  gid: Number() || null,
  number: Number() || null,
  costPrice: Number() || null,
  remark: ""
})

function getGoods() {
  getGoodsAPI({
    pageNum: null,
    pageSize: null
  }).then(data => {
    goodNameList.value = data.data.data.stockList
    console.log(goodNameList.value)
  }).catch(err => {
    console.log(err)
  })
}

function addLoss() {
  if (form.value.gid == null) {
    ElMessage.error("商品名称不能为空")
    return
  }
  if (form.value.number == null) {
    ElMessage.error("损耗数量不能为空")
    return
  }
  if (form.value.costPrice == null) {
    ElMessage.error("损耗单价不能为空")
    return
  }
  console.log(form.value)
  // {
  //   gid:form.value.gid,
  //       number: Number(form.value.number),
  //     costPrice:Number(form.value.costPrice),
  //     remark: form.value.remark
  // }
  addLossAPI(form.value).then(data => {
    console.log(data)
    ElMessage.success(data.data.data)
    empty()
  })
}

function empty() {
  for (const key in form.value) {
    form.value[key] = null
  }
}

onMounted(() => {
  getGoods()
})
</script>
<template>
  <el-form
      :model="form"
      label-width="auto"
      style="max-width: 600px"
  >

    <el-form-item
        label="商品名称:"
    >
      <el-select
          v-model="form.gid"
          placeholder="请选择商品"
      >
        <el-option
            v-for="item in goodNameList"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item
        label="耗损数量:"
    >
      <el-input
          type="number"
          v-model="form.number"
          placeholder="请输入损耗数量"
      />
    </el-form-item>

    <el-form-item label="损耗单价:">
      <el-input
          type="number"
          v-model="form.costPrice"
          placeholder="请输入损耗单价"
      />
    </el-form-item>
    <el-form-item
        label="备注:"
    >
      <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入备注信息"
          show-word-limit
          maxlength="250"
      />
    </el-form-item>

    <el-form-item
        label=" "
    >
      <el-button
          type="primary"
          @click="addLoss"
      >添加
      </el-button>
      <el-button
          @click="empty"
      >
        取消
      </el-button>
    </el-form-item>
  </el-form>
</template>